<template>
  <div style="margin:5px 10px;">
    <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> -->
                <el-breadcrumb-item>标题</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    <div style="margin:20px 25px 40px;">
      <el-input v-model="title"></el-input>
      </div>
      <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> -->
                <el-breadcrumb-item>内容</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
      <div class="container">
      <!-- <div class="plugins-tips">
                Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
                访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
            </div> -->
      <quill-editor
        ref="myTextEditor"
        v-model="content"
        :options="editorOption"
      ></quill-editor>
      <el-button class="editor-btn" type="primary" @click="submit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
  name: 'editor',
  data: function () {
    return {
      content: '',
      title: '',
      editorOption: {
        placeholder: '请输入文本内容'
      }
    }
  },
  components: {
    quillEditor
  },
  methods: {
    onEditorChange ({ editor, html, text }) {
      this.content = html;
    },
    submit () {
      console.log(this.content);
      this.$message.success('提交成功！');
    }
  }
}
</script>
<style scoped lang="less">
.editor-btn {
  margin-top: 20px;
}
/deep/.el-input__inner {
line-height: 38px;
height: 38px;
border: 1px solid #ccc;
}
</style>